<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>箭头函数</title>
</head>

<body>
    <button class="btn">一个按钮1</button>
    <button class="btn">一个按钮2</button>
    <button class="btn">一个按钮3</button>
    <script>
        const name = '全局变量的name'
        function add(a, b) {
            console.log('调用函数add')
            return a + b
        }
        //有多个参数，参数需要使用圆括号
        const add1 = (a, b) => {
            console.log('调用函数add1')
            return a + b
        }
        const add2 = function (a, b) {
            console.log('调用函数add2')
            return a + b
        }
        const say1 = function (name) {
            console.log(`你好${name}`)
        }
        //有只有一个参数，参数可以使用圆括号，也可不用
        const say2 = (name) => {
            console.log(`你好${name}`)
        }
        const say3 = name => {
            console.log(`你好${name}`)
        }
        //如果没有参数一定要使用圆括号
        const hi = () => {
            console.log('hello')
        }
        //如果函数只有一条语句，且该语句就是返回值，再省略大括号{}的同时也可省略return
        const sum = () => { return 'abc' }
        const sum1 = () => 'abc'
        const sum2 = function () {
            return 'abc'
        }
        
        //箭头函数的this
        let albert = {
            name: 'albert',
            sayName: function () {
                console.log(this)
                console.log(`我是${this.name}`)
            },
            sayName1: () => {
                console.log(this)
                console.log(`我是${this.name}`)
            }
        }
        // albert.sayName()
        // albert.sayName1()

        let foo = {
            name: 'foo',
            bar: {
                name: 'bar',
                sayName: function () {
                    console.log(this)
                    console.log(`我是${this.name}`)
                },
                sayName1: () => {
                    console.log(this)
                    console.log(`我是${this.name}`)
                }

            }
        }

        var a = {
            name: "Cherry",
            fn: function () {
                console.log('fn 函数')
                console.log(this)
                console.log(this.name);      // Cherry
            }
        }
        var f = a.fn;
        f()
        // a.fn();
        // window.a.fn();
        

        // foo.bar.sayName()
        // foo.bar.sayName1()
        



        const btns = document.querySelectorAll('.btn')
        btns.forEach(function (btn) {
            btn.onclick = function () {
                console.log(this)
            }
        })




    </script>
</body>

</html>